const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "./src/main.js"), //入口
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {
    open: true,
    port: 3000,
    contentBase: "src", //制定托管的根目录
    hot: true //启动热更新的第一步
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块
    new htmlWebpackPlugin({
      //创建一个在内存中生成html页面的插件
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html"
    })
  ],
  module: {
    //这个节点配置所有第三方模块加载器,use调用从右到左，调用loader从右到左
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
      //cnpm i url-loader file-loader -D
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: "url-loader?limit=7632&name=[hash:8]-[name].[ext]"
      },
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: "url-loader" },
      //cnpm i babel-preset-env babel-preset-stage-0 -D
      { test: /\.js$/, use: "babel-loader",exclude:/node_modules/ }
    ]
  }
};
